

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/zoro.jpg">
  <link rel="icon" href="/img/zoro.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#efb9b9">
  <meta name="description" content="">
  <meta name="author" content="AgoniLay">
  <meta name="keywords" content="">
  
  <title>JavaScript笔记(二) - AgoniLay的博客</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/arta.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->

  
<link rel="stylesheet" href="/css/scroller.css">
<link rel="stylesheet" href="/css/bynode.css">
<link rel="stylesheet" href="/css/mouse.css">



  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"agonilay.github.io","root":"/","version":"1.8.11","typing":{"enable":true,"typeSpeed":150,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading2.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>AgoniLay</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" target="_self" role="button"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="iconfont icon-bookmark"></i>
                索引
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                
                  
                  
                  
                  <a class="dropdown-item" href="/archives/">
                    <i class="iconfont icon-archive-fill"></i>
                    归档
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" href="/categories/">
                    <i class="iconfont icon-category-fill"></i>
                    分类
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" href="/tags/">
                    <i class="iconfont icon-tags-fill"></i>
                    标签
                  </a>
                
              </div>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/links/">
                <i class="iconfont icon-link-fill"></i>
                友链
              </a>
            </li>
          
        
          
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/img/zoro2.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h3" id="subtitle" title="JavaScript笔记(二)">
              
            </span>

            
              <div class="mt-3">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-author" aria-hidden="true"></i>
      AgoniLay
    </span>
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-07-30 14:48" pubdate>
        2021年7月30日 下午
      </time>
    </span>
  
</div>

<div class="mt-1">
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      178
       分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
			
			
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">JavaScript笔记(二)</h1>
            
            <div class="markdown-body">
              <h2 id="ECMAScript"><a href="#ECMAScript" class="headerlink" title="ECMAScript"></a>ECMAScript</h2><p>客户端脚本语言的标准</p>
<h3 id="基本语法"><a href="#基本语法" class="headerlink" title="基本语法"></a>基本语法</h3><h4 id="与html结合方式"><a href="#与html结合方式" class="headerlink" title="与html结合方式"></a>与html结合方式</h4><ol>
<li><p>内部JS：</p>
<ul>
<li><p>标签体内容就是js代码</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">// 内容</span></span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></div></td></tr></table></figure></li>
</ul>
</li>
<li><p>外部JS：</p>
<ul>
<li><p>通过src属性引入外部的js文件</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">&lt;script text=<span class="hljs-string">&quot;text/javascript&quot;</span> src=<span class="hljs-string">&quot;location&quot;</span>&gt;<br>    <span class="hljs-comment">// 内容</span><br>&lt;/script&gt;<br></code></pre></div></td></tr></table></figure></li>
</ul>
</li>
</ol>
<p>注意：</p>
<ol>
<li>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序；</li>
<li>可以定义多个；</li>
<li>同一个标签不能同时引入外部 同时有内部的，这样的话只有外部的好使。</li>
</ol>
<h4 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h4><ol>
<li>单行注释：//注释内容</li>
<li>多行注释：/<em>注释内容</em>/</li>
</ol>
<h4 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h4><h5 id="原始数据类型-基本数据类型"><a href="#原始数据类型-基本数据类型" class="headerlink" title="原始数据类型(基本数据类型)"></a>原始数据类型(基本数据类型)</h5><h6 id="number"><a href="#number" class="headerlink" title="number"></a>number</h6><p>数字类型，整数 / 小数 / NaN(not a number 一个不是数字的数字类型)</p>
<p><code>toFixed(x)</code> 小数点后保留 x 位小数</p>
<p>问题 bug：</p>
<ul>
<li><p>浮点数精度不准</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">0.14</span> * <span class="hljs-number">100</span>); <span class="hljs-comment">// 14.000000000000002</span><br></code></pre></div></td></tr></table></figure></li>
<li><p>小数点前 以及 小数点后 位数大于 16 会出现精度问题</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1000000000000001</span> + <span class="hljs-number">1000000000000001</span>) <span class="hljs-comment">// 2000000000000002</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">10000000000000001</span> + <span class="hljs-number">10000000000000001</span>) <span class="hljs-comment">// 20000000000000000</span><br><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1.000000000000001</span> + <span class="hljs-number">1.000000000000001</span>) <span class="hljs-comment">// 2.000000000000002</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1.0000000000000001</span> + <span class="hljs-number">1.0000000000000001</span>) <span class="hljs-comment">// 2</span><br></code></pre></div></td></tr></table></figure></li>
</ul>
<p><img src="/2021/07/30/JavaScript%E7%AC%94%E8%AE%B0-%E4%BA%8C/image-20210714200731388.png" srcset="/img/loading2.gif" lazyload></p>
<h6 id="string"><a href="#string" class="headerlink" title="string"></a>string</h6><p>字符串类型，字符串  “abc” “a” ‘abc’</p>
<h6 id="boolean"><a href="#boolean" class="headerlink" title="boolean"></a>boolean</h6><p>布尔类型，true 和 false</p>
<ol>
<li>null：一个对象为空的占位符</li>
<li>undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined</li>
</ol>
<p>存放在 <strong>栈</strong> 里，规则 先进后出</p>
<h5 id="引用数据类型"><a href="#引用数据类型" class="headerlink" title="引用数据类型"></a>引用数据类型</h5><ol>
<li><p>Array：数组。</p>
</li>
<li><p>Object：对象。</p>
</li>
<li><p>function：函数。</p>
<p>…</p>
</li>
</ol>
<p>存放在 <strong>堆</strong> 里，拷贝的是地址</p>
<h4 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h4><h5 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h5><p>一小块存储数据的内存空间</p>
<h5 id="强弱类型"><a href="#强弱类型" class="headerlink" title="强弱类型"></a>强弱类型</h5><p>Java语言是强类型语言，而JavaScript是弱类型语言。</p>
<ul>
<li>强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据</li>
<li>弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。</li>
</ul>
<h5 id="全局-amp-局部变量"><a href="#全局-amp-局部变量" class="headerlink" title="全局&amp;局部变量"></a>全局&amp;局部变量</h5><p>访问规则</p>
<ul>
<li>里面的可以访问到外面的，外面的不能访问里面的</li>
</ul>
<h5 id="定义语法"><a href="#定义语法" class="headerlink" title="定义语法"></a>定义语法</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> 变量名 = 初始化值;<br><br><span class="hljs-comment">// 定义多个遍历并赋值</span><br><span class="hljs-keyword">var</span> a = <span class="hljs-number">10</span>,<br>    b = <span class="hljs-number">20</span>,<br>    c = <span class="hljs-number">30</span>,<br>    d = <span class="hljs-number">40</span>,<br>    e;<br><span class="hljs-built_in">document</span>.write(a,b,c,d,e);<br></code></pre></div></td></tr></table></figure>

<h5 id="命名规则"><a href="#命名规则" class="headerlink" title="命名规则"></a>命名规则</h5><ol>
<li>变量名必须以英文字母、_  、$ 开头；</li>
<li>变量名可以包括英文字母、_ 、$ 、数字；</li>
<li>不可以用系统的关键字、保留字作为变量名。</li>
</ol>
<h5 id="typeof-操作符"><a href="#typeof-操作符" class="headerlink" title="typeof 操作符"></a>typeof 操作符</h5><p>获取变量的类型。</p>
<p>number  string  boolean  object  undefined  function</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span>(<span class="hljs-number">123</span>)); <span class="hljs-comment">// number</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span>(<span class="hljs-string">&quot;123&quot;</span>)); <span class="hljs-comment">// string</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span>(<span class="hljs-literal">true</span>)); <span class="hljs-comment">// boolean</span><br></code></pre></div></td></tr></table></figure>

<p>用法：</p>
<ul>
<li><code>typeof(值)</code> </li>
<li><code>typeof 值</code> </li>
</ul>
<p>注：</p>
<ol>
<li><p><strong>null</strong>、array 运算后得到的是object</p>
</li>
<li><p>typeof() 返回的值是字符串类型</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span>(<span class="hljs-keyword">typeof</span>(a))); <span class="hljs-comment">// string</span><br></code></pre></div></td></tr></table></figure></li>
</ol>
<p>特殊：</p>
<p>变量不定义就使用必定会报错，只有一种情况下不会</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span>(a)); <span class="hljs-comment">// undefined</span><br></code></pre></div></td></tr></table></figure>

<p>自定义 type 方法：区分所有类别</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">type</span>(<span class="hljs-params">target</span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> ret = <span class="hljs-keyword">typeof</span>(target);<br>    <span class="hljs-keyword">var</span> template = &#123;<br>        <span class="hljs-string">&quot;[object Array]&quot;</span> : <span class="hljs-string">&quot;array&quot;</span>,<br>        <span class="hljs-string">&quot;[object Object]&quot;</span> : <span class="hljs-string">&quot;object&quot;</span>,<br>        <span class="hljs-string">&quot;[object Number]&quot;</span> : <span class="hljs-string">&quot;number - object&quot;</span>,<br>        <span class="hljs-string">&quot;[object Boolean]&quot;</span> : <span class="hljs-string">&quot;boolean - object&quot;</span>,<br>        <span class="hljs-string">&quot;[object String]&quot;</span> : <span class="hljs-string">&quot;string - object&quot;</span><br>    &#125;<br>    <span class="hljs-keyword">if</span> (target === <span class="hljs-literal">null</span>) &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;null&quot;</span>;<br>    &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (ret == <span class="hljs-string">&quot;object&quot;</span>) &#123;<br>        <span class="hljs-keyword">var</span> str = <span class="hljs-built_in">Object</span>.prototype.toString.call(target);<br>        <span class="hljs-keyword">return</span> template[str];<br>    &#125; <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-keyword">return</span> ret;<br>    &#125;<br>&#125;<br></code></pre></div></td></tr></table></figure>

<h4 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h4><h5 id="隐式类型转换"><a href="#隐式类型转换" class="headerlink" title="隐式类型转换"></a>隐式类型转换</h5><h6 id="isNaN"><a href="#isNaN" class="headerlink" title="isNaN()"></a>isNaN()</h6><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">isNaN</span>(<span class="hljs-literal">NaN</span>)); <span class="hljs-comment">// true</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">isNaN</span>(<span class="hljs-number">123</span>)); <span class="hljs-comment">// false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">isNaN</span>(<span class="hljs-string">&quot;123&quot;</span>)); <span class="hljs-comment">// false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">isNaN</span>(<span class="hljs-string">&quot;abc&quot;</span>)); <span class="hljs-comment">// true</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">isNaN</span>(<span class="hljs-literal">null</span>)); <span class="hljs-comment">// false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">isNaN</span>(<span class="hljs-literal">undefined</span>)); <span class="hljs-comment">// true</span><br></code></pre></div></td></tr></table></figure>

<p>isNaN() 之前会先 Number()</p>
<p>模拟 isNaN() 方法：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">myIsNaN</span>(<span class="hljs-params">num</span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> ret = <span class="hljs-built_in">Number</span>(num);<br>    ret += <span class="hljs-string">&quot;&quot;</span>;<br>    <span class="hljs-keyword">if</span> (ret == <span class="hljs-string">&quot;NaN&quot;</span>) &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br>    &#125; <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>    &#125;<br>&#125;<br></code></pre></div></td></tr></table></figure>

<h6 id="–"><a href="#–" class="headerlink" title="++ – + -"></a>++ – + -</h6><p>(自增 自减 正负号)</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> a = <span class="hljs-string">&quot;123&quot;</span>;<br>a ++; <span class="hljs-comment">// 124</span><br></code></pre></div></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> a = +<span class="hljs-string">&quot;123&quot;</span>; <span class="hljs-comment">// +123</span><br><span class="hljs-keyword">var</span> b = +<span class="hljs-string">&quot;abc&quot;</span>; <span class="hljs-comment">// NaN</span><br></code></pre></div></td></tr></table></figure>

<h6 id><a href="#" class="headerlink" title="+"></a>+</h6><p>(加号)</p>
<p>两侧没有字符串，则正常数字相加，调用 Number() 方法将不是 number 的隐式转换</p>
<p>当加号两侧至少有一侧是字符串时，会调用 String() 方法把两侧均转换为字符串</p>
<p>当加号左侧是引用类型值时，调用的是 String() 方法隐式转换</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">[] + <span class="hljs-number">1</span>;  <span class="hljs-comment">// --&gt; String([]) + 1 --&gt; &quot;1&quot;</span><br>[] + <span class="hljs-string">&quot;&quot;</span>; <span class="hljs-comment">// &quot;&quot;</span><br>&#123;&#125; + <span class="hljs-number">1</span>;  <span class="hljs-comment">// 1</span><br></code></pre></div></td></tr></table></figure>

<p>但引用值的隐式类型转换不用知道，规则较多。</p>
<h6 id="-1"><a href="#-1" class="headerlink" title="- * / %"></a>- * / %</h6><p>(运算符号)</p>
<p>调用 Number() 方法</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> num = <span class="hljs-string">&quot;2&quot;</span> * <span class="hljs-string">&quot;1&quot;</span>; <span class="hljs-comment">// number : 2</span><br><span class="hljs-keyword">var</span> num = <span class="hljs-string">&quot;a&quot;</span> * <span class="hljs-string">&quot;1&quot;</span>; <span class="hljs-comment">// number : NaN</span><br></code></pre></div></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">[] - <span class="hljs-number">1</span>; <span class="hljs-comment">// -1</span><br></code></pre></div></td></tr></table></figure>

<h6 id="amp-amp"><a href="#amp-amp" class="headerlink" title="&amp;&amp; || !"></a>&amp;&amp; || !</h6><p>判断调用 Boolean() 方法</p>
<h6 id="lt-gt-…"><a href="#lt-gt-…" class="headerlink" title="&lt; &gt; …"></a>&lt; &gt; …</h6><p>(比较符号)</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> a = <span class="hljs-number">3</span> &gt; <span class="hljs-string">&quot;2&quot;</span>; <span class="hljs-comment">// boolean: true</span><br><span class="hljs-keyword">var</span> a = <span class="hljs-string">&quot;3&quot;</span> &gt; <span class="hljs-string">&quot;2&quot;</span>; <span class="hljs-comment">// 会比较对应的 ASCII码 值</span><br></code></pre></div></td></tr></table></figure>

<p>特殊</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-literal">undefined</span> &gt; <span class="hljs-number">0</span>; <span class="hljs-comment">// false 不转换，系统规定 undefined 和 null 不能和数进行比较</span><br><span class="hljs-literal">null</span> &gt; <span class="hljs-number">0</span>; <span class="hljs-comment">// false</span><br></code></pre></div></td></tr></table></figure>



<h6 id="-2"><a href="#-2" class="headerlink" title="== !="></a>== !=</h6><p>调用 Boolean() 方法</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span> == <span class="hljs-literal">true</span>; <span class="hljs-comment">// boolean: true</span><br></code></pre></div></td></tr></table></figure>

<p>引用值比较的是地址：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">&#123;&#125; == &#123;&#125;; <span class="hljs-comment">// false</span><br>[] == []; <span class="hljs-comment">// false</span><br><br><span class="hljs-keyword">var</span> obj = &#123;&#125;;<br><span class="hljs-keyword">var</span> obj1 = obj;<br>obj == obj1; <span class="hljs-comment">// true</span><br>obj === obj1; <span class="hljs-comment">// true</span><br></code></pre></div></td></tr></table></figure>

<p>特殊：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-literal">undefined</span> == <span class="hljs-literal">null</span>; <span class="hljs-comment">// true</span><br><span class="hljs-literal">NaN</span> == <span class="hljs-literal">NaN</span>; <span class="hljs-comment">// false</span><br></code></pre></div></td></tr></table></figure>

<h5 id="显式类型转换"><a href="#显式类型转换" class="headerlink" title="显式类型转换"></a>显式类型转换</h5><h6 id="Number"><a href="#Number" class="headerlink" title="Number()"></a>Number()</h6><p>把里面的东西转换为数字型</p>
<p>null  false  =&gt;  0</p>
<p>undefined =&gt;  NaN</p>
<h6 id="parseInt"><a href="#parseInt" class="headerlink" title="parseInt()"></a>parseInt()</h6><p>把里面的数转换为整数</p>
<p>注：看到非数字位截止</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-built_in">parseInt</span>(<span class="hljs-string">&quot;123&quot;</span>); <span class="hljs-comment">// 123</span><br><span class="hljs-built_in">parseInt</span>(<span class="hljs-string">&quot;123abc&quot;</span>); <span class="hljs-comment">// 123</span><br><span class="hljs-comment">// 用途</span><br><span class="hljs-comment">// 把像素值从 100px 中取出来</span><br></code></pre></div></td></tr></table></figure>

<p><code>parseInt(值, radix)</code> radix: 2 - 36</p>
<p>后面的第二个参数表示此数所表示的进制</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-built_in">parseInt</span>(<span class="hljs-string">&quot;B&quot;</span>, <span class="hljs-number">16</span>); <span class="hljs-comment">// 11</span><br></code></pre></div></td></tr></table></figure>

<p>后面填 0 </p>
<ul>
<li>有的浏览器是 原样转换整型输出</li>
<li>有的是输出 NaN</li>
</ul>
<h6 id="parseFloat"><a href="#parseFloat" class="headerlink" title="parseFloat()"></a>parseFloat()</h6><p>注：看到除了第一个 .  的非数字位截止</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-built_in">parseFloat</span>(<span class="hljs-string">&quot;123.12abc&quot;</span>); <span class="hljs-comment">// 123.12</span><br></code></pre></div></td></tr></table></figure>

<h6 id="Boolean"><a href="#Boolean" class="headerlink" title="Boolean()"></a>Boolean()</h6><h6 id="toString-NaN"><a href="#toString-NaN" class="headerlink" title="toString()"></a>toString()</h6><p>语法：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> demo = <span class="hljs-number">10</span><br><span class="hljs-keyword">var</span> str = demo.toString(); <span class="hljs-comment">// &quot;10</span><br><span class="hljs-comment">// 转换进制</span><br><span class="hljs-keyword">var</span> num = demo.toString(<span class="hljs-number">8</span>); <span class="hljs-comment">// 12</span><br></code></pre></div></td></tr></table></figure>

<p>注：undefined 和 null 不能用 toSting() 方法</p>
<p>例子：</p>
<p>二进制 转 十六进制</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> num = <span class="hljs-number">10000</span>;<br><span class="hljs-keyword">var</span> test = <span class="hljs-built_in">parseInt</span>(num, <span class="hljs-number">2</span>);<br><span class="hljs-built_in">console</span>.log(test.toString(<span class="hljs-number">16</span>)); <span class="hljs-comment">// aa</span><br></code></pre></div></td></tr></table></figure>

<h5 id="不发生类型转换"><a href="#不发生类型转换" class="headerlink" title="不发生类型转换"></a>不发生类型转换</h5><h6 id="-3"><a href="#-3" class="headerlink" title="=== !=="></a>=== !==</h6><p>数值 和 类型 均相等才可</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-number">1</span> === <span class="hljs-number">1</span>; <span class="hljs-comment">// true</span><br><span class="hljs-number">1</span> === <span class="hljs-string">&quot;1&quot;</span>; <span class="hljs-comment">// false</span><br><span class="hljs-number">1</span> !== <span class="hljs-string">&quot;1&quot;</span>; <span class="hljs-comment">// true</span><br><span class="hljs-number">1</span> !== <span class="hljs-number">1</span>; <span class="hljs-comment">// false</span><br></code></pre></div></td></tr></table></figure>

<p>特殊：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-literal">NaN</span> === <span class="hljs-literal">NaN</span>; <span class="hljs-comment">// false</span><br></code></pre></div></td></tr></table></figure>

<h5 id="练习"><a href="#练习" class="headerlink" title="练习"></a>练习</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> str  = <span class="hljs-literal">false</span> + <span class="hljs-number">1</span>;<br><span class="hljs-built_in">document</span>.write(str); <span class="hljs-comment">// 1</span><br><span class="hljs-keyword">var</span> demo = <span class="hljs-literal">false</span> == <span class="hljs-number">1</span>;<br><span class="hljs-built_in">document</span>.write(demo); <span class="hljs-comment">// false</span><br><span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span>(a) &amp;&amp; -<span class="hljs-literal">true</span> + (+<span class="hljs-literal">undefined</span>) + <span class="hljs-string">&quot;&quot;</span>) &#123;<br>    <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&#x27;基础扎实！&#x27;</span>);<br>&#125;<br><span class="hljs-keyword">if</span> (<span class="hljs-number">11</span> + <span class="hljs-string">&quot;11&quot;</span> * <span class="hljs-number">2</span> == <span class="hljs-number">33</span>) &#123;<br>    <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&#x27;基础扎实！&#x27;</span>);<br>&#125;<br>!!<span class="hljs-string">&quot; &quot;</span> + !!<span class="hljs-string">&quot;&quot;</span> - !!<span class="hljs-literal">false</span> || <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&#x27;你觉得能打印，你就是🐖&#x27;</span>);<br></code></pre></div></td></tr></table></figure>

<h4 id="运算符"><a href="#运算符" class="headerlink" title="运算符"></a>运算符</h4><h5 id="一元运算符"><a href="#一元运算符" class="headerlink" title="一元运算符"></a>一元运算符</h5><p>只有一个运算数的运算符<br>    ++，– ， +(正号)  </p>
<ul>
<li>++ –: 自增(自减)<ul>
<li>++(–) 在前，先自增(自减)，再运算</li>
<li>++(–) 在后，先运算，再自增(自减)</li>
</ul>
</li>
<li>+(-)：正负号</li>
</ul>
<p>注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换</p>
<ul>
<li>其他类型转number：<ul>
<li>string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）</li>
<li>boolean转number ：true转为1，false转为0</li>
</ul>
</li>
</ul>
<h5 id="算数运算符"><a href="#算数运算符" class="headerlink" title="算数运算符"></a>算数运算符</h5><p>​    + - * / %</p>
<p>注：</p>
<ol>
<li>1/0 会得 Infinity（无穷）</li>
<li>1/0 会得 -Infinity</li>
<li>0/0 会得 NaN</li>
</ol>
<h5 id="赋值运算符"><a href="#赋值运算符" class="headerlink" title="赋值运算符"></a>赋值运算符</h5><p>​    =  +=  -=  *=  /=  %=</p>
<h5 id="比较运算符"><a href="#比较运算符" class="headerlink" title="比较运算符"></a>比较运算符</h5><p>​    &lt;  &gt;=  &lt;=  ==  ===(全等于)</p>
<p>比较方式：</p>
<ol>
<li><p>类型相同：直接比较</p>
<p>​    字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。即 ASCII码 值</p>
</li>
<li><p>类型不同：先进行类型转换，再比较</p>
<p>​    ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false</p>
</li>
</ol>
<h5 id="逻辑运算符"><a href="#逻辑运算符" class="headerlink" title="逻辑运算符"></a>逻辑运算符</h5><p>​    &amp;&amp; ||  !</p>
<ul>
<li><p>&amp;&amp;（与）：先看第一个表达式转化为 boolean 值是否为真，结果为真，则依次往后看每个表达式转换为boolean值的结果，直到碰到结果为 false 的表达式，返回该表达式的值。</p>
<p>用法：（短路语句）</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> data = ...;<br><span class="hljs-comment">// data &amp;&amp; 执行一个语句，会用到data;</span><br>data &amp;&amp; fn(data);<br></code></pre></div></td></tr></table></figure></li>
<li><p>||（或）：碰到表达式的结果 boolean值为真则返回该表达式的值</p>
<p>用法：（兼容）</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">div.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>&#123;<br>    <span class="hljs-comment">// 兼容 IE 浏览器</span><br>    <span class="hljs-keyword">var</span> event = e || <span class="hljs-built_in">window</span>.event;<br>&#125;<br></code></pre></div></td></tr></table></figure></li>
<li><p>! （非）：将表达式的值转换为 boolean值 再取反，返回该 boolean值。</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> a = !!<span class="hljs-string">&quot;&quot;</span>;<br><span class="hljs-comment">// !! 可以让一个值转换为 boolean值</span><br></code></pre></div></td></tr></table></figure></li>
</ul>
<p>注意：</p>
<p>undefined、null、NaN、””、0、false  ==&gt;  false</p>
<p>除了以上六个值以外，其他的转换为 boolean 类型均为 true</p>
<p>练习：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">(<span class="hljs-built_in">window</span>.foo || (<span class="hljs-built_in">window</span>.foo = <span class="hljs-string">&#x27;bar&#x27;</span>));<br><span class="hljs-comment">// window.foo = &#x27;bar&#x27;</span><br><span class="hljs-comment">// 先读小括号内的，即先赋值</span><br></code></pre></div></td></tr></table></figure>

<h5 id="三元运算符"><a href="#三元运算符" class="headerlink" title="三元运算符"></a>三元运算符</h5><p>语法：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">表达式 ? 值<span class="hljs-number">1</span> : 值<span class="hljs-number">2</span>;<br></code></pre></div></td></tr></table></figure>

<p>判断表达式的值，如果是 true 则取值1，如果是 false 则取值2；</p>
<h5 id="逗号运算符"><a href="#逗号运算符" class="headerlink" title="逗号运算符"></a>逗号运算符</h5><p>会将后面的结果返回出去</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> a = (<span class="hljs-number">1</span> - <span class="hljs-number">1</span>, <span class="hljs-number">1</span> + <span class="hljs-number">1</span>);<br>a --&gt; <span class="hljs-number">2</span><br></code></pre></div></td></tr></table></figure>

<h5 id="括号运算符"><a href="#括号运算符" class="headerlink" title="括号运算符"></a>括号运算符</h5><ol>
<li><p>优先运算</p>
<p>将里面的内容变为表达式</p>
<p><code>(function () &#123;&#125;)</code> 函数声明失效，变为表达式</p>
</li>
<li><p>立即执行</p>
<p><code>(function () &#123;&#125;)()</code> </p>
</li>
</ol>
<h4 id="流程控制语句"><a href="#流程控制语句" class="headerlink" title="流程控制语句"></a>流程控制语句</h4><ol>
<li><p>if…else…</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">if</span>(判断语句) &#123;<br>    条件体<br>&#125;<br></code></pre></div></td></tr></table></figure></li>
<li><p>switch:</p>
</li>
</ol>
<ul>
<li><p>在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)</p>
</li>
<li><p>在JS中,switch语句可以接受任意的原始数据类型</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">switch</span> () &#123;<br>    <span class="hljs-keyword">case</span> 判断条件<span class="hljs-number">1</span>:<br>    	执行语句<span class="hljs-number">1</span>; <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> 判断条件<span class="hljs-number">2</span>:<br>    	执行语句<span class="hljs-number">2</span>; <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> 判断条件<span class="hljs-number">3</span>:<br>        执行语句<span class="hljs-number">3</span>; <span class="hljs-keyword">break</span>;<br>    ...<br>    <span class="hljs-attr">default</span>:<br>        <span class="hljs-keyword">break</span>;<br>&#125;<br></code></pre></div></td></tr></table></figure></li>
</ul>
<ol start="3">
<li><p>while</p>
<p>底层机制就是 for 循环：for 循环括号内两边不写语句就是 while 循环：<code>for (;条件语句;) &#123;&#125;</code></p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">while</span>(条件语句) &#123;<br>    循环语句<br>&#125;<br></code></pre></div></td></tr></table></figure></li>
<li><p>do…while</p>
<p>先执行一次，再判断条件语句</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">do</span> &#123;<br>    循环体<br>&#125; <span class="hljs-keyword">while</span> (条件语句)<br></code></pre></div></td></tr></table></figure></li>
<li><p>for</p>
</li>
<li><p>break</p>
<p>跳出循环或者 switch</p>
</li>
<li><p>continue</p>
<p>终止本次循环进行下次循环</p>
</li>
</ol>
<h4 id="JS特殊语法"><a href="#JS特殊语法" class="headerlink" title="JS特殊语法"></a>JS特殊语法</h4><ol>
<li>语句以 ; 结尾，如果一行只有一条语句则 ; 可以省略 (不建议)</li>
<li>变量的定义使用 var 关键字，也可以不使用</li>
</ol>
<ul>
<li>用：定义的变量是局部变量</li>
<li>不用：定义的变量是全局变量(不建议)</li>
</ul>
<ol start="3">
<li>练习：99乘法表</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>99乘法表<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">            <span class="hljs-selector-tag">td</span>&#123;</span><br><span class="css">                <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid;</span><br><span class="css">            &#125;</span><br><span class="css">        </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><br>        <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript"></span><br><span class="javascript">            <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&quot;&lt;table  align=&#x27;center&#x27;&gt;&quot;</span>);</span><br><span class="javascript">            <span class="hljs-comment">//1.完成基本的for循环嵌套，展示乘法表</span></span><br><span class="javascript">            <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i &lt;= <span class="hljs-number">9</span> ; i++) &#123;</span><br><span class="javascript">                <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&quot;&lt;tr&gt;&quot;</span>);</span><br><span class="javascript">                <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> j = <span class="hljs-number">1</span>; j &lt;=i ; j++) &#123;</span><br><span class="javascript">                    <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&quot;&lt;td&gt;&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">                    <span class="hljs-comment">//输出  1 * 1 = 1</span></span><br><span class="javascript">                    <span class="hljs-built_in">document</span>.write(i + <span class="hljs-string">&quot; * &quot;</span> + j + <span class="hljs-string">&quot; = &quot;</span> + ( i*j) +<span class="hljs-string">&quot;&amp;nbsp;&amp;nbsp;&amp;nbsp;&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">                    <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&quot;&lt;/td&gt;&quot;</span>);</span><br><span class="javascript">                &#125;</span><br><span class="javascript">                <span class="hljs-comment">/*//输出换行</span></span><br><span class="hljs-comment"><span class="javascript">document.write(&quot;&lt;br&gt;&quot;);*/</span></span><br><span class="javascript"></span><br><span class="javascript">                <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&quot;&lt;/tr&gt;&quot;</span>);</span><br><span class="javascript">            &#125;</span><br><span class="javascript"></span><br><span class="javascript">            <span class="hljs-comment">//2.完成表格嵌套</span></span><br><span class="javascript">            <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&quot;&lt;/table&gt;&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">        </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<h3 id="基本对象"><a href="#基本对象" class="headerlink" title="基本对象"></a>基本对象</h3><h4 id="包装类"><a href="#包装类" class="headerlink" title="包装类"></a>包装类</h4><p>使用包装类对象创建的以下三种对象，依然还带有原本的数据类型的特点，不同在于可以有属性和方法</p>
<p>但是 undefined 和 null 不可以设置属性</p>
<h5 id="Number-数字对象"><a href="#Number-数字对象" class="headerlink" title="Number:数字对象"></a>Number:数字对象</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> num = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Number</span>(<span class="hljs-number">123</span>);<br></code></pre></div></td></tr></table></figure>

<h5 id="String-字符串对象"><a href="#String-字符串对象" class="headerlink" title="String:字符串对象"></a>String:字符串对象</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> str = <span class="hljs-keyword">new</span> Stirng(<span class="hljs-string">&#x27;abcd&#x27;</span>);<br></code></pre></div></td></tr></table></figure>

<h5 id="Boolean-布尔对象"><a href="#Boolean-布尔对象" class="headerlink" title="Boolean:布尔对象"></a>Boolean:布尔对象</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> bol = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Boolean</span>(<span class="hljs-string">&#x27;true&#x27;</span>);<br></code></pre></div></td></tr></table></figure>

<h5 id="详解"><a href="#详解" class="headerlink" title="详解"></a>详解</h5><p>原始数据类型不能有自己的属性和方法</p>
<h6 id="自定义属性"><a href="#自定义属性" class="headerlink" title="自定义属性"></a>自定义属性</h6><p>但下面这个却不报错：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> num = <span class="hljs-number">4</span>;<br>num.len = <span class="hljs-number">3</span>; <span class="hljs-comment">// 不报错</span><br><span class="hljs-built_in">console</span>.log(num.len) <span class="hljs-comment">// undefined</span><br></code></pre></div></td></tr></table></figure>

<p>原因：（包装类）</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> num = <span class="hljs-number">4</span>;<br>num.len = <span class="hljs-number">3</span>; <span class="hljs-comment">// 不报错</span><br><span class="hljs-comment">// new Number(4).len = 3;</span><br><span class="hljs-comment">// delete</span><br><span class="hljs-comment">// new Number(4).len --&gt; undefined</span><br><span class="hljs-built_in">console</span>.log(num.len) <span class="hljs-comment">// undefined</span><br></code></pre></div></td></tr></table></figure>

<h6 id="length问题"><a href="#length问题" class="headerlink" title="length问题"></a>length问题</h6><p>在数组中：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>];<br><span class="hljs-comment">// arr.length --&gt; 5</span><br>arr.length = <span class="hljs-number">2</span><br><span class="hljs-comment">// arr.length --&gt; 2</span><br><span class="hljs-comment">// arr --&gt; [1, 2]</span><br></code></pre></div></td></tr></table></figure>

<p>但是，在字符串中</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&#x27;abcd&#x27;</span>;<br><span class="hljs-comment">// str.length --&gt; 4</span><br>str.length = <span class="hljs-number">2</span>;<br><span class="hljs-comment">// new String(&#x27;abcd&#x27;).length = 2;</span><br><span class="hljs-comment">// delete</span><br><span class="hljs-built_in">console</span>.log(str); <span class="hljs-comment">// abcd</span><br><span class="hljs-comment">// new String(&#x27;abcd&#x27;).length</span><br><span class="hljs-built_in">console</span>.log(str.length); <span class="hljs-comment">// 4</span><br></code></pre></div></td></tr></table></figure>

<p>字符串对象 本身就有 length属性，调用时是从包装类对象中返回的属性值</p>
<h5 id="例题"><a href="#例题" class="headerlink" title="例题"></a>例题</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&#x27;abc&#x27;</span>;<br>str += <span class="hljs-number">1</span>;<br><span class="hljs-keyword">var</span> test = <span class="hljs-keyword">typeof</span> str; <span class="hljs-comment">// test --&gt; &#x27;string&#x27;</span><br><span class="hljs-keyword">if</span> (test.length == <span class="hljs-number">6</span>) &#123;<br>    test.sign = <span class="hljs-string">&#x27;typeof的返回结果可能为String&#x27;</span>;<br>    <span class="hljs-comment">// new String(test).sign = &#x27;xxx&#x27;;</span><br>&#125;<br><span class="hljs-comment">// new String(test).sign</span><br><span class="hljs-built_in">console</span>.log(test.sign);<br></code></pre></div></td></tr></table></figure>



<h4 id="Function-函数对象"><a href="#Function-函数对象" class="headerlink" title="Function:函数对象"></a>Function:函数对象</h4><p>高内聚，弱耦合</p>
<h5 id="创建"><a href="#创建" class="headerlink" title="创建"></a>创建</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> fn = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Function</span>(形式参数列表，方法体)；<span class="hljs-comment">//忘掉吧</span><br><br><span class="hljs-comment">// 函数声明</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> 方法名称(<span class="hljs-params">形式参数列表</span>) </span>&#123;<br>    方法体<br>&#125;<br><br><span class="hljs-comment">// 命名函数表达式</span><br><span class="hljs-keyword">var</span> 方法名 = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>) </span>&#123;<br>    方法体<br>&#125;<br><span class="hljs-comment">// 匿名函数表达式 --- 函数表达式</span><br><span class="hljs-keyword">var</span> 方法名 = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>    方法体<br>&#125;<br></code></pre></div></td></tr></table></figure>

<h5 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 形式参数（形参）</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sum</span>(<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> c = a + b;<br>    <span class="hljs-built_in">document</span>.write(c);<br>&#125;<br><span class="hljs-comment">// 实际参数（实参）</span><br>sum(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>); <span class="hljs-comment">// 3</span><br></code></pre></div></td></tr></table></figure>

<p>参数不限制位数</p>
<h6 id="arguments"><a href="#arguments" class="headerlink" title="arguments"></a>arguments</h6><p>表示实参列表，也有一些属性</p>
<ul>
<li><p>arguments.length  实参个数</p>
</li>
<li><p>arguments.callee 指向这个函数自身引用 –&gt; 即函数本身</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> num = (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">n</span>) </span>&#123;<br>    <span class="hljs-keyword">if</span> (n == <span class="hljs-number">1</span>) &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;<br>    &#125;<br>    <span class="hljs-keyword">return</span> n * <span class="hljs-built_in">arguments</span>.callee(n - <span class="hljs-number">1</span>);<br>&#125;(<span class="hljs-number">100</span>))<br></code></pre></div></td></tr></table></figure></li>
</ul>
<p>函数名.length  形参个数</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sum</span>(<span class="hljs-params">a</span>) </span>&#123;<br>    <span class="hljs-comment">// arguments -- [11,2,3] 实参列表</span><br>	<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">arguments</span>); <span class="hljs-comment">// [11,2,3]</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">arguments</span>.length); <span class="hljs-comment">// 3</span><br>    <span class="hljs-comment">// 函数名.length -- 形参长度</span><br>    concole.log(sum.length); <span class="hljs-comment">// 1</span><br>&#125;<br>sum(<span class="hljs-number">11</span>, <span class="hljs-number">2</span>,<span class="hljs-number">3</span>)<br></code></pre></div></td></tr></table></figure>

<p>例子：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 求不定参数个数的和</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sum</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> result = <span class="hljs-number">0</span><br>    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-built_in">arguments</span>.length; i++) &#123;<br>        result += <span class="hljs-built_in">arguments</span>[i];<br>    &#125;<br>    <span class="hljs-built_in">document</span>.write(result);<br>&#125;<br>sum(<span class="hljs-number">1</span>,<span class="hljs-number">3</span>);<br></code></pre></div></td></tr></table></figure>

<p>arguments里面的值 和 形参的值 之间有映射关系，但只是在形参和实参对应时才生效</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sum</span>(<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-comment">// arguments  --&gt;  [1]</span><br>    a = <span class="hljs-number">2</span>;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">arguments</span>[<span class="hljs-number">0</span>]); <span class="hljs-comment">// 2</span><br>    <span class="hljs-built_in">arguments</span>[<span class="hljs-number">0</span>] = <span class="hljs-number">3</span>;<br>    <span class="hljs-built_in">console</span>.log(a); <span class="hljs-comment">// 3</span><br>    <br>    b = <span class="hljs-number">2</span>;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">arguments</span>[<span class="hljs-number">1</span>]); <span class="hljs-comment">// undefined</span><br>&#125;<br>sum(<span class="hljs-number">1</span>);<br></code></pre></div></td></tr></table></figure>

<h5 id="caller"><a href="#caller" class="headerlink" title="caller"></a>caller</h5><p>函数的一个属性：表示被调用的环境</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span>(<span class="hljs-params"></span>) </span>&#123;<br>    demo();<br>&#125;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">demo</span>(<span class="hljs-params"></span>) </span>&#123;<br>    demo,caller; <span class="hljs-comment">// --&gt; test --&gt; function test() &#123;demo();&#125;</span><br>&#125;<br>test();<br></code></pre></div></td></tr></table></figure>

<p>不怎么用，但会和 arguments.callee 一块出现做区分</p>
<h5 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h5><ol>
<li>方法定义时，形参的类型不用写，返回值类型也不写</li>
<li>方法时一个对象，如果定义名称相同的方法，会覆盖</li>
<li>在JS中，方法的调用只与方法的名称有关，和参数列表无关</li>
<li>在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数</li>
</ol>
<h5 id="调用"><a href="#调用" class="headerlink" title="调用"></a>调用</h5>  <figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">方法名称(实际参数列表);<br></code></pre></div></td></tr></table></figure>

<h6 id="连续调用"><a href="#连续调用" class="headerlink" title="连续调用"></a>连续调用</h6><p>模拟 jQuery 连续调用</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> deng = &#123;<br>    <span class="hljs-attr">smoke</span> : <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;Somking...&#x27;</span>);<br>        <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>;<br>    &#125;,<br>    <span class="hljs-attr">drink</span> : <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;Drinking...&#x27;</span>);<br>        <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>;<br>    &#125;,<br>    <span class="hljs-attr">perm</span> : <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;Perming...&#x27;</span>);<br>        <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>;<br>    &#125;            <br>&#125;<br><br>deng.smoke().drink().perm();<br></code></pre></div></td></tr></table></figure>

<h5 id="结束条件和返回值"><a href="#结束条件和返回值" class="headerlink" title="结束条件和返回值"></a>结束条件和返回值</h5><ul>
<li>return 语句后的内容将不再执行，终止函数</li>
<li>返回值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">myNumber</span>(<span class="hljs-params">target</span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> +target;<br>&#125;<br><span class="hljs-keyword">var</span> num = myNumber(<span class="hljs-string">&#x27;123&#x27;</span>);<br><span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span>(num) + <span class="hljs-string">&quot; &quot;</span> + num); <span class="hljs-comment">// number 123</span><br></code></pre></div></td></tr></table></figure>

<h5 id="练习-1"><a href="#练习-1" class="headerlink" title="练习"></a>练习</h5><h6 id="求阶乘"><a href="#求阶乘" class="headerlink" title="求阶乘"></a>求阶乘</h6><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 求阶乘方法</span><br><span class="hljs-comment">// n! = n * (n-1)!</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">mul</span>(<span class="hljs-params">n</span>) </span>&#123;<br>    <span class="hljs-keyword">if</span> (n == <span class="hljs-number">1</span> || n == <span class="hljs-number">0</span>) &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-number">1</span><br>    &#125;<br>    <span class="hljs-keyword">return</span> n * mul(n - <span class="hljs-number">1</span>);<br>&#125;<br><span class="hljs-keyword">var</span> n = <span class="hljs-built_in">parseInt</span>(prompt(<span class="hljs-string">&#x27;input&#x27;</span>));<br>mul(n);<br><span class="hljs-comment">// 递归</span><br><span class="hljs-comment">/* </span><br><span class="hljs-comment">	mul(5);</span><br><span class="hljs-comment">    5 * mul(4);</span><br><span class="hljs-comment">    5 * 4 * mul(3);</span><br><span class="hljs-comment">    5 * 4 * 3 * mul(2);</span><br><span class="hljs-comment">    5 * 4 * 3 * 2 * 1; </span><br><span class="hljs-comment">*/</span><br></code></pre></div></td></tr></table></figure>

<h6 id="斐波那契数列"><a href="#斐波那契数列" class="headerlink" title="斐波那契数列"></a>斐波那契数列</h6><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 斐波那契数列</span><br><span class="hljs-comment">// fb(n) == fb(n - 1) + fb(n - 2)</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fb</span>(<span class="hljs-params">n</span>) </span>&#123;<br>    <span class="hljs-keyword">if</span> (n == <span class="hljs-number">2</span> || n == <span class="hljs-number">1</span>) &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;<br>    &#125;<br>    <span class="hljs-keyword">return</span> fb(n - <span class="hljs-number">1</span>) + fb(n - <span class="hljs-number">2</span>);<br>&#125;<br></code></pre></div></td></tr></table></figure>

<h5 id="原型-prototype"><a href="#原型-prototype" class="headerlink" title="原型 prototype"></a>原型 prototype</h5><p>原型是 function 对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该圆心的属性和方法。原型也是对象。</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">Person.prototype.LastName = <span class="hljs-string">&quot;Agoni&quot;</span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <br>&#125;<br><span class="hljs-keyword">var</span> person = <span class="hljs-keyword">new</span> Person();<br><span class="hljs-keyword">var</span> person1 = <span class="hljs-keyword">new</span> Person();<br><span class="hljs-comment">// person.LastName --&gt; &quot;Agoni&quot;</span><br><span class="hljs-comment">// person1.LastName --&gt; &quot;Agoni&quot;</span><br></code></pre></div></td></tr></table></figure>

<p>对象中固定不变的属性（公有的内容）可以提取出来放到原型中，避免代码多次执行造成冗余。</p>
<h6 id="增删改查"><a href="#增删改查" class="headerlink" title="增删改查"></a>增删改查</h6><p>删</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">delete</span> Person.prototype.LastName;<br></code></pre></div></td></tr></table></figure>

<p>经过了 var 给 window 上增加的属性为不可配置性属性，delete无法删除。</p>
<p>增改查</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">Person.prototype.LastName = <span class="hljs-string">&quot;Agoni&quot;</span>;<br></code></pre></div></td></tr></table></figure>

<p>设置属性（可以多个一起设置）</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">Person.prototype = &#123;<br>    <span class="hljs-attr">height</span>: <span class="hljs-number">1400</span>,<br>    lang, <span class="hljs-number">4900</span>,<br>    <span class="hljs-attr">carName</span>: <span class="hljs-string">&quot;BMW&quot;</span><br>&#125;<br></code></pre></div></td></tr></table></figure>

<p>和 <code>Person.prototype.name = &quot;&quot;</code> 的区别：</p>
<ul>
<li>上面的那一种是重新放一个空间，如之前已设置过且已经生成了对象，则 <code>__proto__</code> 所指向的还是原先的那个空间；</li>
<li>下面的是在原先的空间中设置或修改属性，使得 <code>__proto__</code> 的访问数据变更</li>
</ul>
<h6 id="构造器-constructor"><a href="#构造器-constructor" class="headerlink" title="构造器 constructor"></a>构造器 constructor</h6><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Car</span>(<span class="hljs-params"></span>) </span>&#123;&#125;<br><span class="hljs-keyword">var</span> car = <span class="hljs-keyword">new</span> Car();<br><span class="hljs-comment">// car.constructor --&gt; funciton Car() &#123;&#125;</span><br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span>(<span class="hljs-params"></span>) </span>&#123;&#125;<br>Car.prototype = &#123;<br>    <span class="hljs-attr">constructor</span> : Person<br>&#125;<br><span class="hljs-comment">// car.constructor --&gt; function Person() &#123;&#125;</span><br></code></pre></div></td></tr></table></figure>

<h6 id="proto"><a href="#proto" class="headerlink" title="__proto__"></a>__proto__</h6><p>隐式属性 <code>__proto__</code> 内就放着原型，在控制台展开可以查看</p>
<p>原理：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">Person.prototype.name = <span class="hljs-string">&quot;abc&quot;</span>;<br>funciton <span class="hljs-function"><span class="hljs-title">Person</span>(<span class="hljs-params"></span>)</span> &#123;<br>    <span class="hljs-comment">// var this = &#123;</span><br>    <span class="hljs-comment">//     __proto__ : Person.prototype</span><br>	<span class="hljs-comment">// &#125;</span><br>&#125;<br><span class="hljs-keyword">var</span> person = <span class="hljs-keyword">new</span> Person();<br></code></pre></div></td></tr></table></figure>

<p>原型也可以改变：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 代码接上一部分</span><br><span class="hljs-keyword">var</span> obj = &#123;<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;sunny&quot;</span><br>&#125;<br><span class="hljs-keyword">var</span> person = <span class="hljs-keyword">new</span> Person();<br><span class="hljs-comment">// person.name --&gt; &quot;abc&quot;</span><br>Person.__proto__ = obj;<br><span class="hljs-comment">// person.name --&gt; &quot;sunny&quot;</span><br></code></pre></div></td></tr></table></figure>

<h6 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h6><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">Grand.prototype.lastName = <span class="hljs-string">&quot;agoni&quot;</span>;<br>funciton <span class="hljs-function"><span class="hljs-title">Grand</span>(<span class="hljs-params"></span>)</span> &#123;<br>    <br>&#125;<br><span class="hljs-keyword">var</span> grand = <span class="hljs-keyword">new</span> Grand();<br><br>Father.prototype = grand;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Father</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">this</span>.name = <span class="hljs-string">&quot;Lay&quot;</span><br>&#125;<br><span class="hljs-keyword">var</span> father = <span class="hljs-keyword">new</span> Father();<br><br>Son.prototype = fatehr;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Son</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">this</span>.hobbit = <span class="hljs-string">&quot;smoke&quot;</span><br>&#125;<br><span class="hljs-keyword">var</span> son = <span class="hljs-keyword">new</span> Son();<br><span class="hljs-comment">// son.hobbit --&gt; &quot;smoke&quot;</span><br><span class="hljs-comment">// son.name --&gt; &quot;Lay&quot;</span><br><span class="hljs-comment">// son.lastName --&gt; &quot;Agoni&quot;</span><br></code></pre></div></td></tr></table></figure>

<p>查找属性，依照 <code>son --&gt; father --&gt; grand</code>  顺序依次查找，这个链就叫 原型链。</p>
<p>链顶并不是最末的：</p>
<h6 id="Object-prototype"><a href="#Object-prototype" class="headerlink" title="Object.prototype"></a>Object.prototype</h6><p>是<strong>绝大多数</strong>对象的最终原型</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// Grand.prototype.__proto__  --&gt;  Object.prototype</span><br><br><span class="hljs-comment">// son.toString() --&gt; function toString() &#123; [native code] &#125; // 最终终端的方法</span><br><br><span class="hljs-comment">// Object.prototype.__proto__  --&gt;  null</span><br></code></pre></div></td></tr></table></figure>

<p>Object.prototype 里面没有 __proto__ 了</p>
<h6 id="Object-create"><a href="#Object-create" class="headerlink" title="Object.create()"></a>Object.create()</h6><p>括号内填原型：只能是 对象 或 null</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">Person.prototype.name = <span class="hljs-string">&quot;sunny&quot;</span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <br>&#125;<br><span class="hljs-keyword">var</span> person = <span class="hljs-built_in">Object</span>.create(Person.prototype)<br></code></pre></div></td></tr></table></figure>

<p>特殊点：</p>
<p>原型最终不会指向 Object.prototype</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> obj = <span class="hljs-built_in">Object</span>.create(<span class="hljs-literal">null</span>);<br><span class="hljs-comment">// obj.toString() --&gt; 访问不到，报错</span><br></code></pre></div></td></tr></table></figure>

<p>语法：</p>
<p><code>Object.create(prototype, definedProperty&lt;特性&gt;)</code></p>
<h6 id="方法重写"><a href="#方法重写" class="headerlink" title="方法重写"></a>方法重写</h6><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">Person.prototype = &#123;<br>    <span class="hljs-attr">toString</span> : <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&#x27;hehe&#x27;</span>;<br>    &#125;<br>&#125;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <br>&#125;<br><span class="hljs-keyword">var</span> person = <span class="hljs-keyword">new</span> Person();<br><span class="hljs-comment">// person.toString(); --&gt; &quot;hehe&quot;</span><br></code></pre></div></td></tr></table></figure>

<p>发生截断，不会访问到终端 Object.prototype 的 toSting() 方法</p>
<p>Number Array Boolean String 都对 toSting() 方法进行了重写</p>
<h6 id="document-write-原理"><a href="#document-write-原理" class="headerlink" title="document.write 原理"></a>document.write 原理</h6><p>会隐式调用 toSting() 方法</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> obj = <span class="hljs-built_in">Object</span>.create(<span class="hljs-literal">null</span>);<br><span class="hljs-built_in">document</span>.write(obj); <span class="hljs-comment">// 报错，因为自己创建的对象值为 null 且 Object.create() 创建的没有原型链，没有 toString() 方法，所以报错</span><br><br>obj.toStirng = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-string">&#x27;AgoniLay&#x27;</span>;<br>&#125;<br><span class="hljs-built_in">document</span>.write(obj); <span class="hljs-comment">// AgoniLay --&gt; 调用了 AgoniLay 方法</span><br></code></pre></div></td></tr></table></figure>

<h5 id="call-apply"><a href="#call-apply" class="headerlink" title="call/apply"></a>call/apply</h5><h6 id="call"><a href="#call" class="headerlink" title="call()"></a>call()</h6><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">test(); <span class="hljs-comment">// --&gt; test.call();</span><br></code></pre></div></td></tr></table></figure>

<p>call 带参数</p>
<p>根本作用：<strong>改变 tihs 指向</strong></p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span>(<span class="hljs-params">name, age</span>) </span>&#123;<br>    <span class="hljs-built_in">this</span>.name = name;<br>    <span class="hljs-built_in">this</span>.age = age;<br>&#125;<br><span class="hljs-keyword">var</span> person = <span class="hljs-keyword">new</span> Person(<span class="hljs-string">&#x27;deng&#x27;</span>, <span class="hljs-number">100</span>);<br><br><span class="hljs-keyword">var</span> obj = &#123;<br>    <br>&#125;<br><span class="hljs-comment">// 第一个参数指 this 的指向，之后的依次代表 实参 对应 形参</span><br>Person.call(obj, <span class="hljs-string">&#x27;agoni&#x27;</span>, <span class="hljs-number">19</span>);<br><span class="hljs-comment">// obj --&gt; &#123;name: &#x27;agoni&#x27;, age: 19&#125;</span><br></code></pre></div></td></tr></table></figure>

<p>使用实例：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span>(<span class="hljs-params">name, age, sex</span>) </span>&#123;<br>    <span class="hljs-built_in">this</span>.name = name;<br>    <span class="hljs-built_in">this</span>.age = age;<br>    <span class="hljs-built_in">this</span>.sex = sex;<br>&#125;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Student</span>(<span class="hljs-params">name, age, sex, tel, grade</span>) </span>&#123;<br>    Person.call(<span class="hljs-built_in">this</span>, name, age, sex);<br>    <span class="hljs-built_in">this</span>.tel = tel;<br>    <span class="hljs-built_in">this</span>.grade = grade;<br>&#125;<br><br><span class="hljs-keyword">var</span> student = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&#x27;sunny&#x27;</span>, <span class="hljs-number">123</span>, <span class="hljs-string">&#x27;male&#x27;</span>, <span class="hljs-number">1309</span>, <span class="hljs-number">2017</span>);<br></code></pre></div></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Wheel</span>(<span class="hljs-params">wheelSize, style</span>) </span>&#123;<br>    <span class="hljs-built_in">this</span>.style = style;<br>    <span class="hljs-built_in">this</span>.wheelSize = wheelSize;<br>&#125;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Sit</span>(<span class="hljs-params">c, sitColor</span>) </span>&#123;<br>    <span class="hljs-built_in">this</span>.c = c;<br>    <span class="hljs-built_in">this</span>.sitColor = sitColor;<br>&#125;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Model</span>(<span class="hljs-params">height, width, len</span>) </span>&#123;<br>    <span class="hljs-built_in">this</span>.height = height;<br>    <span class="hljs-built_in">this</span>.width = width;<br>    <span class="hljs-built_in">this</span>.len = len;<br>&#125;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Car</span>(<span class="hljs-params">wheelSize, style, c, sitColor, height, width, len</span>) </span>&#123;<br>    Wheel.call(<span class="hljs-built_in">this</span>, wheelSize, style);<br>    Sit.call(<span class="hljs-built_in">this</span>, c, sitColor);<br>    Model.call(<span class="hljs-built_in">this</span>, height, width, len);<br>&#125;<br><span class="hljs-keyword">var</span> car = <span class="hljs-keyword">new</span> Car(<span class="hljs-number">100</span>, <span class="hljs-string">&#x27;花里胡哨&#x27;</span>, <span class="hljs-string">&#x27;真皮&#x27;</span>, <span class="hljs-string">&#x27;red&#x27;</span>, <span class="hljs-number">1800</span>, <span class="hljs-number">1900</span>, <span class="hljs-number">4900</span>);<br><span class="hljs-comment">// car &#123;style: &quot;花里胡哨&quot;, wheelSize: 100, c: &quot;真皮&quot;, sitColor: &quot;red&quot;, height: 1800, …&#125;</span><br></code></pre></div></td></tr></table></figure>

<h6 id="apply"><a href="#apply" class="headerlink" title="apply()"></a>apply()</h6><p>和 call() 区别：</p>
<ul>
<li>传参列表不同：apply 第一个参数还是 this 所指对象，第二个参数是一个数组，数组里面是所有的实参<ul>
<li>call 需要把实参按照形参的个数传进去</li>
<li>apply 需要传一个 arguments</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Car</span>(<span class="hljs-params">wheelSize, style, c, sitColor, height, width, len</span>) </span>&#123;<br>    Wheel.apply(<span class="hljs-built_in">this</span>, [wheelSize, style]);<br>    Sit.call(<span class="hljs-built_in">this</span>, [c, sitColor]);<br>    Model.call(<span class="hljs-built_in">this</span>, [height, width, len]);<br>&#125;<br></code></pre></div></td></tr></table></figure>

<h5 id="继承-–-gt-圣杯模式"><a href="#继承-–-gt-圣杯模式" class="headerlink" title="继承 –&gt; 圣杯模式"></a>继承 –&gt; 圣杯模式</h5><ol>
<li><p>传统形式 –&gt;  原型链</p>
<ul>
<li>过多的继承了没用的属性</li>
</ul>
</li>
<li><p>借用构造函数 call()/apply()</p>
<ul>
<li>不能继承借用构造函数的原型</li>
<li>每次构造函数都要多走一个函数（视觉上减少代码，但多走了方法）</li>
</ul>
</li>
<li><p>共享原型</p>
<p><code>son.prototype = father.prototype</code> </p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">Father.prototype.lastName = <span class="hljs-string">&quot;AgoniLay&quot;</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Father</span>(<span class="hljs-params"></span>) </span>&#123;<br>&#125;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Son</span>(<span class="hljs-params"></span>) </span>&#123;<br>&#125;<br>funciton <span class="hljs-function"><span class="hljs-title">inherit</span>(<span class="hljs-params">Target, Origin</span>)</span> &#123;<br>    Target.prototype = Origin.prototype;<br>&#125;<br><span class="hljs-comment">// 先继承，后用</span><br>inherit(Son, Father);<br><br><span class="hljs-keyword">var</span> son = <span class="hljs-keyword">new</span> Son();<br><span class="hljs-comment">// son.lastName --&gt; &quot;AgoniLay&quot;</span><br><span class="hljs-comment">// father.lastName --&gt; &quot;AgoniLay&quot;</span><br><br>Son.prototype.sex = <span class="hljs-string">&quot;male&quot;</span>; <span class="hljs-comment">// 添加后，son 和 father 都有了这个属性</span><br><span class="hljs-comment">// son.sex --&gt; &quot;male&quot;</span><br><span class="hljs-comment">// father.sex --&gt; &quot;male&quot;</span><br></code></pre></div></td></tr></table></figure></li>
<li><p><strong>圣杯模式</strong> *</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 通俗写法</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">inherit</span>(<span class="hljs-params">Target, Origin</span>) </span>&#123;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">F</span>(<span class="hljs-params"></span>) </span>&#123;&#125;;<br>    <span class="hljs-comment">// 以下两行顺序不能颠倒</span><br>    F.prototype = Origin.prototype;<br>    Target.prototype = <span class="hljs-keyword">new</span> F();<br>    <span class="hljs-comment">// 优化</span><br>    Target.prototype.constuctor = Target;<br>    Target.prototype.uber = Origin.prototype;<br>&#125;<br><br>Father.prototype.lastName = <span class="hljs-string">&quot;AgoniLay&quot;</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Father</span>(<span class="hljs-params"></span>) </span>&#123;<br>&#125;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Son</span>(<span class="hljs-params"></span>) </span>&#123;<br>&#125;<br><br>inherit(Son, Father);<br><span class="hljs-keyword">var</span> son = <span class="hljs-keyword">new</span> Son();<br><span class="hljs-keyword">var</span> father = <span class="hljs-keyword">new</span> Father();<br><span class="hljs-comment">// father.lastName --&gt; &quot;AgoniLay&quot;</span><br><span class="hljs-comment">// son.lastName --&gt; &quot;AgoniLay&quot;</span><br><br>Son.prototype.sex = <span class="hljs-string">&quot;male&quot;</span>;<br><span class="hljs-comment">// son.sex --&gt; &quot;male&quot;</span><br><span class="hljs-comment">// father.sex --&gt; undifined</span><br></code></pre></div></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 雅虎的</span><br><span class="hljs-keyword">var</span> inherit = (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> F = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;&#125;; <span class="hljs-comment">// 闭包应用 -- 私有化变量</span><br>    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">Target, Origin</span>) </span>&#123;<br>        F.prototype = Origin.prototype;<br>        Target.prototype = <span class="hljs-keyword">new</span> F();<br>        Target.prototype.constructor = Target;<br>        Target.prototype.uber = Origin.prototype;<br>    &#125;<br>&#125;());<br></code></pre></div></td></tr></table></figure></li>
</ol>
<h4 id="Array-数组对象"><a href="#Array-数组对象" class="headerlink" title="Array:数组对象"></a>Array:数组对象</h4><h5 id="创建-1"><a href="#创建-1" class="headerlink" title="创建"></a>创建</h5><ol>
<li><p><code>var arr = [];</code>  数组字面量 – 推荐使用</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>];<br><br><span class="hljs-keyword">var</span> arr = [,,]; <span class="hljs-comment">// [undefined * 2]</span><br><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>,,<span class="hljs-number">2</span>]; <span class="hljs-comment">// [1, undefined, 2] --&gt; 稀松数组</span><br></code></pre></div></td></tr></table></figure></li>
<li><p><code>var arr = new Array();</code> </p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> arr = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>);<br></code></pre></div></td></tr></table></figure>

<p>和 数组字面量 区别：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 只传一个参数，代表数组的长度</span><br><span class="hljs-keyword">var</span> arr = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">10</span>); <span class="hljs-comment">// [undefined * 10]</span><br><span class="hljs-comment">// 但不能只传一个小数</span><br><span class="hljs-keyword">var</span> arr = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">10.2</span>); <span class="hljs-comment">// 报错</span><br></code></pre></div></td></tr></table></figure></li>
</ol>
<h5 id="读和写"><a href="#读和写" class="headerlink" title="读和写"></a>读和写</h5><p>溢出读是 undefined，可以溢出写</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> arr[<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>];<br>arr[<span class="hljs-number">0</span>] = <span class="hljs-number">2</span> <span class="hljs-comment">// [2,2,3]</span><br><span class="hljs-built_in">console</span>.log(arr[<span class="hljs-number">10</span>]); <span class="hljs-comment">// undefined 不会报错</span><br>arr[<span class="hljs-number">10</span>] = <span class="hljs-string">&quot;aa&quot;</span>; <span class="hljs-comment">// 可以添加 --&gt; [1,2,3,undefined * 7,&quot;aa&quot;]</span><br></code></pre></div></td></tr></table></figure>

<h5 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h5><p>可以改变原数组的方法开始：只有七个</p>
<h6 id="push"><a href="#push" class="headerlink" title="push()"></a>push()</h6><p>在数组<strong>最后</strong>添加数据，不仅可以添加一个，返回值是添加后的数组长度</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 自己写 push() 方法</span><br><span class="hljs-keyword">var</span> arr = [];<br><span class="hljs-built_in">Array</span>.prototype.push = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-built_in">arguments</span>.length; i ++) &#123;<br>        <span class="hljs-built_in">this</span>[<span class="hljs-built_in">this</span>.length] = <span class="hljs-built_in">arguments</span>[i];<br>    &#125;<br>    <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.length;<br>&#125;<br>arr.push(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>); <span class="hljs-comment">// 3 --&gt; [1,2,3]</span><br></code></pre></div></td></tr></table></figure>

<p>但 push 的原理是取决于属性中 length 值，与 length 值有关</p>
<h6 id="pop"><a href="#pop" class="headerlink" title="pop()"></a>pop()</h6><p>把数组的<strong>最后一位</strong>剪切出来返回</p>
<h6 id="unshift"><a href="#unshift" class="headerlink" title="unshift()"></a>unshift()</h6><p>在数组<strong>开头</strong>添加数据，不仅可以添加一个，返回值是添加后的数组长度</p>
<h6 id="shift"><a href="#shift" class="headerlink" title="shift()"></a>shift()</h6><p>把数组的<strong>第一位</strong>剪切出来返回</p>
<h6 id="reverse"><a href="#reverse" class="headerlink" title="reverse()"></a>reverse()</h6><p>把数组<strong>逆转</strong>，把原数组返回</p>
<h6 id="splice"><a href="#splice" class="headerlink" title="splice()"></a>splice()</h6><p><code>arr.splice(从第几位开始, 截取多少的长度, 在切口处添加新的数据)</code> </p>
<p>返回截取的数组</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">3</span>];<br>arr.splice(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>); <span class="hljs-comment">// [1,2] --&gt; [1,2,3,3]</span><br><br><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">3</span>];<br>arr.splice(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>) <span class="hljs-comment">// [1,2] --&gt; [1,0,0,0,2,3,3]</span><br><br><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>];<br><span class="hljs-comment">// 不截取，只是向中间插入数据 例：向上面数组 3 后面添加一个 0</span><br>arr.splice(<span class="hljs-number">3</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>);<br><br><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>];<br><span class="hljs-comment">// 截取的位置可以是负数，表示从倒数开始</span><br>arr.splice(-<span class="hljs-number">1</span>,<span class="hljs-number">1</span>); <span class="hljs-comment">// [4] --&gt; [1,2,3]</span><br><span class="hljs-comment">// 实现</span><br>splice = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">pos, ...</span>) </span>&#123;<br>    pos += pos &gt; <span class="hljs-number">0</span> ? <span class="hljs-number">0</span> : <span class="hljs-built_in">this</span>.length; <span class="hljs-comment">// -1 + 4 = 3</span><br>&#125;<br></code></pre></div></td></tr></table></figure>

<h6 id="sort"><a href="#sort" class="headerlink" title="sort() *"></a>sort() *</h6><p>在原数组上将原数组内元素升序排列（但并不是数字值的大小）</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">0</span>,-<span class="hljs-number">1</span>,<span class="hljs-number">9</span>];<br>arr.sort(); <span class="hljs-comment">// [-1,0,1,3,4,9]</span><br><span class="hljs-comment">// 降序</span><br>arr.sort().reverse();<br></code></pre></div></td></tr></table></figure>

<p>为了解决这个问题，sort 留了一个接口让用户自定义排序方式</p>
<p>规则：</p>
<ol>
<li>必须写俩形参</li>
<li>看返回值<ol>
<li>当返回值为负数时，那么前面的数放在前面</li>
<li>为正数，那么后面的数在前</li>
<li>为 0，不动</li>
</ol>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">3</span>,<span class="hljs-number">5</span>,<span class="hljs-number">4</span>,<span class="hljs-number">10</span>];<br><span class="hljs-comment">// 传参顺序 1,3  1,5  1,4  1,10  3,5</span><br>arr.sort(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-comment">// 函数体</span><br>    <span class="hljs-comment">// if (a &gt; b) &#123;</span><br>    <span class="hljs-comment">//    return 1;</span><br>    <span class="hljs-comment">//&#125; else &#123;</span><br>    <span class="hljs-comment">//    return -1;</span><br>    <span class="hljs-comment">//&#125;</span><br>    <span class="hljs-comment">// 简化</span><br>    <span class="hljs-keyword">return</span> a - b; <span class="hljs-comment">// 升序</span><br>    <span class="hljs-comment">// return b - a; // 降序</span><br>&#125;) <span class="hljs-comment">// [1, 3, 4, 5, 10]</span><br></code></pre></div></td></tr></table></figure>

<p>运用：</p>
<p>给一个有序的数组，乱序</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>,<span class="hljs-number">6</span>,<span class="hljs-number">7</span>];<br>arr.sort(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>	<span class="hljs-keyword">return</span> <span class="hljs-built_in">Math</span>.random() - <span class="hljs-number">0.5</span>;<br>&#125;)<br></code></pre></div></td></tr></table></figure>

<p>给一个对象数组，按某一属性排</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> cheng = &#123;<br>    <span class="hljs-attr">name</span> : <span class="hljs-string">&quot;cheng&quot;</span>,<br>    <span class="hljs-attr">age</span> : <span class="hljs-number">30</span>,<br>&#125;<br><span class="hljs-keyword">var</span> deng = &#123;<br>    <span class="hljs-attr">name</span> : <span class="hljs-string">&quot;deng&quot;</span>,<br>    <span class="hljs-attr">age</span> : <span class="hljs-number">60</span>,<br>&#125;<br><span class="hljs-keyword">var</span> zhang = &#123;<br>    <span class="hljs-attr">name</span> : <span class="hljs-string">&quot;zhang&quot;</span>,<br>    <span class="hljs-attr">age</span> : <span class="hljs-number">19</span>,<br>&#125;<br><span class="hljs-keyword">var</span> arr = [cheng, deng, zhang];<br><span class="hljs-comment">// 按年龄升序排列</span><br>arr.sort(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> a.age - b.age;<br>&#125;) <span class="hljs-comment">// [&quot;zhang&quot;, &quot;cheng&quot;, &quot;deng&quot;]</span><br></code></pre></div></td></tr></table></figure>

<p>按字符串长度排序</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&#x27;as&#x27;</span>, <span class="hljs-string">&#x27;asdad&#x27;</span>, <span class="hljs-string">&#x27;s&#x27;</span>, <span class="hljs-string">&#x27;sjdfhakjsdfhlkajsd&#x27;</span>, <span class="hljs-string">&#x27;asdjhajsk&#x27;</span>];<br>arr.sort(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> a.length - b.length;<br>&#125;) <span class="hljs-comment">// [&#x27;s&#x27;, &#x27;as&#x27;, &#x27;asdad&#x27;, &#x27;asdjhajsk&#x27;, &#x27;sjdfhakjsdfhlkajsd&#x27;]</span><br></code></pre></div></td></tr></table></figure>

<p>按字节长度排序</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">retBytes</span>(<span class="hljs-params">str</span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> num = str.length;<br>    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; str.length; i ++) &#123;<br>        <span class="hljs-keyword">if</span> (str.charCodeAt(i) &gt; <span class="hljs-number">255</span>) &#123;<br>            num++;<br>        &#125;<br>    &#125;<br>    <span class="hljs-keyword">return</span> num++;<br>&#125;<br><br><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&#x27;赛的环境asdj&#x27;</span>, <span class="hljs-string">&#x27;asd&#x27;</span>, <span class="hljs-string">&#x27;啥的， 爱睡觉的&#x27;</span>, <span class="hljs-string">&#x27;a saa&#x27;</span>];<br>arr.sort(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> retBytes(a) - retBytes(b);<br>&#125;) <span class="hljs-comment">// [&quot;asd&quot;, &quot;a saa&quot;, &quot;赛的环境asdj&quot;, &quot;啥的， 爱睡觉的&quot;]</span><br></code></pre></div></td></tr></table></figure>

<p>不改变原数组的方法开始：调用完使用 变量 接收，否则没有意义</p>
<h6 id="concat"><a href="#concat" class="headerlink" title="concat()"></a>concat()</h6><p>把括号内的数组拼接到前面数组的后面，不在原数组上修改，返回拼接后的数组</p>
<h6 id="toString"><a href="#toString" class="headerlink" title="toString()"></a>toString()</h6><p>将数组返回为字符串类型的字符串</p>
<h6 id="slice"><a href="#slice" class="headerlink" title="slice()"></a>slice()</h6><p><code>arr.slice(&#39;从该位开始截取&#39;, &#39;截取到该位&#39;)</code></p>
<p><code>arr.slice(1)</code> 从第 1 位截取，截取到最后，也可以填负数（规则 + length）</p>
<p><code>arr.slice()</code> 整个截取</p>
<h6 id="join"><a href="#join" class="headerlink" title="join()"></a>join()</h6><p>将数组中元素按规定连接起来，返回一个字符串</p>
<p>参数可以传所有原始值，但最好传字符串</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>];<br>arr.join(<span class="hljs-string">&quot;&amp;&quot;</span>); <span class="hljs-comment">// &quot;1&amp;2&amp;3&quot;</span><br>arr.join(); <span class="hljs-comment">// &quot;1,2,3&quot;</span><br></code></pre></div></td></tr></table></figure>

<h6 id="split"><a href="#split" class="headerlink" title="split()"></a>split()</h6><p>是字符串的方法，是 join() 的可逆方法</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;1-2-3-4-5&quot;</span>;<br>str.split(<span class="hljs-string">&quot;-&quot;</span>); <span class="hljs-comment">// [&quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;]</span><br></code></pre></div></td></tr></table></figure>

<p>自定义方法：</p>
<h6 id="unique"><a href="#unique" class="headerlink" title="unique()"></a>unique()</h6><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-built_in">Array</span>.prototype.unique = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">arr</span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> temp = &#123;&#125;;<br>    <span class="hljs-keyword">var</span> arr = [];<br>    <span class="hljs-keyword">var</span> len = <span class="hljs-built_in">this</span>.length;<br>    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; len; i++) &#123;<br>        <span class="hljs-keyword">if</span> (!temp[<span class="hljs-built_in">this</span>[i]]) &#123;<br>            temp[<span class="hljs-built_in">this</span>[i]] = <span class="hljs-string">&#x27;agoni&#x27;</span>;<br>            arr.push(<span class="hljs-built_in">this</span>[i]);<br>        &#125;<br>    &#125;<br>    <span class="hljs-keyword">return</span> arr;<br>&#125;<br></code></pre></div></td></tr></table></figure>

<h5 id="类数组"><a href="#类数组" class="headerlink" title="类数组"></a>类数组</h5><p>类数组有要求：</p>
<ol>
<li>属性要为索引（数组）属性</li>
<li>必须有 length 属性</li>
</ol>
<h4 id="Math对象"><a href="#Math对象" class="headerlink" title="Math对象"></a>Math对象</h4><h4 id="Date对象"><a href="#Date对象" class="headerlink" title="Date对象"></a>Date对象</h4><h4 id="Reg正则表达式对象"><a href="#Reg正则表达式对象" class="headerlink" title="Reg正则表达式对象"></a>Reg正则表达式对象</h4><h3 id="JS-运行"><a href="#JS-运行" class="headerlink" title="JS 运行"></a>JS 运行</h3><p>this</p>
<p>闭包</p>
<p>with</p>
<p>eval</p>
<p>预编译    </p>
<p>try…catch</p>
<p>有待更新…</p>
<p>博客笔记地址（二）：<a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_58163927/article/details/119077465">https://blog.csdn.net/qq_58163927/article/details/119077465</a></p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/JavaScript/">JavaScript</a>
                    
                      <a class="hover-with-bg" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a>
                    
                      <a class="hover-with-bg" href="/tags/ECMAScript/">ECMAScript</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均为本人原创，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2021/07/30/JavaScript%E7%AC%94%E8%AE%B0-%E4%B8%89/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JavaScript笔记(三)</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2021/07/30/JavaScript%E7%AC%94%E8%AE%B0-%E4%B8%80/">
                        <span class="hidden-mobile">JavaScript笔记(一)</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->

  <div class="col-lg-7 mx-auto nopadding-x-md">
    <div class="container custom post-custom mx-auto">
      <img src="/img/agoni.gif" srcset="/img/loading2.gif" lazyload class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;"> <h5 style="text-align: center; margin-top: 1rem;">谢谢您的光临噢！！！</h5> 
    </div>
  </div>


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <span>张宝文</span> <i class="iconfont icon-love"></i> <span>郑佳丽</span>  
	<!--《添加网站运行时间 -->
<br/>

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date(); 

function createtime() {
    //此处修改你的建站时间或者网站上线时间
    var grt = new Date('07/28/2021 19:00:00');
    now.setTime(now.getTime() + 250);
    days = (now - grt) / 1000 / 60 / 60 / 24;

    dnum = Math.floor(days);
    hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if (String(hnum).length == 1) {
        hnum = "0" + hnum;
    }
    minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if (String(mnum).length == 1) {
        mnum = "0" + mnum;
    }
    seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds);
    if (String(snum).length == 1) {
        snum = "0" + snum;
    }
    document.getElementById("timeDate").innerHTML = " 本站已各种夹缝中安全运行 " + dnum + " 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()", 250);
</script>

<!-- 添加网站运行时间》-->
  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/js/local-search.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

  <script>
    function typing(id, title){
        var typed = new Typed('#' + id, {
            strings: [
              '  ',
              title + "&nbsp;",
            ],
            cursorChar: "❤",
            typeSpeed: 150,
            loop: false,
        });
        typed.stop();
        $(document).ready(function () {
            $(".typed-cursor").addClass("h2");
            typed.start();
        });
    }

    
        typing("subtitle", document.getElementById('subtitle').title)
    

  </script>













  
<script src="//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/yinghua.js"></script>



<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>

</body>
</html>
